import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Select,
  Row,
  Col,
  Modal,
  Button,
  Input,
  InputNumber,
  Radio,
  Table,
  Tag,
  Spin,
  Popover,
  Upload,
  Icon,
  message,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { routerRedux, Link } from 'dva/router';

import {
  getParamUrl,
  getMathJax,
  getUniqueKey,
  baseUri,
  imageUri,
  minHeight,
  myMessage,
} from '../../utils/formatDataSource';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

@connect(({ studentDetailConfig, loading }) => ({
  studentDetailConfig,
  loading: loading.models.studentDetailConfig,
  lessonInfoLoading: loading.effects['studentDetailConfig/getInitStudentDetail'],
  addNewScoreLoading: loading.effects['studentDetailConfig/addNewScore'],
}))
class StudentDetail extends PureComponent {
  state = {
    allowUpload: true,
    uniQueKey: '1',
    studentId: '',
    modalVisible: false,
    delVisible: false,
    levelVisible: false,
    levelSelected: '',
    currentLevelObj: {},
    userInfo: {},
    classCommonInfo: {
      allow: '',
      teacher: '',
      time: '',
      status: '',
    },
    classLessons: [],
    errorQuestions: [],
    leaves: [],
    subjectPc: [],
    levelPc: [],
    isPingCe: false,
    recentScores: [],
    currentScore: {},
    previewVisible: false,
    previewImage: '',
    fileList: [
      {
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    ],
  };
  componentDidMount = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'studentDetailConfig/getInitStudentDetail',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { initData } = this.props.studentDetailConfig;
      this.setState({
        userInfo: initData,
        studentId: params.studentId,
      });
    });
    dispatch({
      type: 'studentDetailConfig/getMyLessonInfo',
      payload: {
        studentId: params.studentId,
      },
    });
    dispatch({
      type: 'studentDetailConfig/getMyErrorQuestions',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { errors } = this.props.studentDetailConfig;
      if (errors) {
        errors.map((e, i) => (e.key = i + 1));
      }
      this.setState({
        errorQuestions: errors,
      });
    });

    dispatch({
      type: 'studentDetailConfig/getStudentLeaves',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { leaves } = this.props.studentDetailConfig;
      this.setState({
        leaves,
      });
    });
    dispatch({
      type: 'studentDetailConfig/getSubjectPingce',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { subjectPc } = this.props.studentDetailConfig;
      this.setState({
        subjectPc,
      });
    });
    dispatch({
      type: 'studentDetailConfig/getStudentRealityScores',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { initScores } = this.props.studentDetailConfig;
      console.log(initScores);
      initScores.map(s => {
        let imageArr = [];
        if (s.images) {
          imageArr = s.images.split('、').map((v, i) => {
            return {
              scoreId: s.id,
              uid: i,
              name: v,
              url: imageUri + v,
            };
          });
        }
        s.imageArray = imageArr;
      });
      this.setState({
        recentScores: initScores,
      });
    });
    dispatch({
      type: 'studentDetailConfig/getStudentLevelInfo',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { levelPc } = this.props.studentDetailConfig;
      this.setState({
        levelPc: levelPc.data,
        isPingCe: levelPc.isPingCe,
      });
    });
  };

  lessonInfoColumns = () => {
    return [
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
        align: 'center',
      },
      {
        title: '考勤',
        dataIndex: 'clock',
        key: 'clock',
        align: 'center',
        render: value => {
          return value === 1 ? (
            <span style={{ color: 'green' }}>Y</span>
          ) : (
            <span style={{ color: 'red' }}>N</span>
          );
        },
      },
      {
        title: '课程评论',
        dataIndex: 'comment',
        key: 'comment',
        align: 'center',
      },
      {
        title: '作业成绩',
        dataIndex: 'homeworkScore',
        key: 'homeworkScore',
        align: 'center',
        render: value => {
          return value ? value : '--- ---';
        },
      },
    ];
  };
  errorColumns = () => {
    return [
      {
        title: '排行',
        dataIndex: 'key',
        key: 'key',
        align: 'center',
        width: '5%',
      },
      {
        title: '题目名称',
        dataIndex: 'stem',
        key: 'stem',
        width: '45%',
        render: value => {
          return (
            <Popover
              overlayStyle={{ maxWidth: '400px' }}
              placement="right"
              trigger="hover"
              content={getMathJax(value)}
            >
              <span>{getMathJax(value, 'style', '800px')}</span>
            </Popover>
          );
        },
      },
      {
        title: '题型',
        dataIndex: 'typeName',
        key: 'typeName',
        align: 'center',
        width: '5%',
      },
      {
        title: '标签',
        key: 'tag',
        dataIndex: 'tag',
        align: 'center',
        width: '20%',
        render: item => {
          if (item) {
            if (!item.appearCategory) {
              item.appearCategory = '';
            }
            if (!item.districtCategory) {
              item.districtCategory = '';
            }
            if (!item.recommendCategory) {
              item.recommendCategory = '';
            }
            if (!item.sourceCategory) {
              item.sourceCategory = '';
            }
            if (!item.wrongCategory) {
              item.wrongCategory = '';
            }
            if (!item.yearCategory) {
              item.yearCategory = '';
            }
            return (
              <div>
                <Tag color="cyan" hidden={item.appearCategory === ''}>
                  {item.appearCategory}
                </Tag>
                <Tag color="cyan" hidden={item.districtCategory === ''}>
                  {item.districtCategory}
                </Tag>
                <Tag color="cyan" hidden={item.recommendCategory === ''}>
                  {item.recommendCategory}
                </Tag>
                <Tag color="cyan" hidden={item.sourceCategory === ''}>
                  {item.sourceCategory}
                </Tag>
                <Tag color="cyan" hidden={item.wrongCategory === ''}>
                  {item.wrongCategory}
                </Tag>
                <Tag color="cyan" hidden={item.yearCategory === ''}>
                  {item.yearCategory}
                </Tag>
              </div>
            );
          } else {
            return '';
          }
        },
      },
    ];
  };
  leaveColumns = () => {
    return [
      {
        title: '日期',
        dataIndex: 'createDate',
        key: 'createDate',
        align: 'center',
      },
      {
        title: '请假时间',
        key: 'clockTime',
        align: 'center',
        render: item => (
          <span>
            {item.leaveStart} - {item.leaveEnd}
          </span>
        ),
      },
      {
        title: '请假班级',
        dataIndex: 'className',
        key: 'className',
        align: 'center',
      },
      {
        title: '请假内容',
        dataIndex: 'type',
        key: 'type',
        align: 'center',
        render: value => (value === 1 ? <span>事假</span> : <span>病假</span>),
      },
      {
        title: '审批结果',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        render: value => {
          if (value === 1) {
            return <Tag color="cyan">待调整</Tag>;
          } else if (value === 2) {
            return <Tag color="cyan">调整中</Tag>;
          } else if (value === 3) {
            return <Tag color="cyan">已请假</Tag>;
          } else {
            return '';
          }
        },
      },
    ];
  };
  realityColumns = () => {
    return [
      {
        title: '学科',
        dataIndex: 'subject',
        key: 'subject',
        align: 'center',
      },
      {
        title: '考试名称',
        dataIndex: 'examName',
        key: 'examName',
        align: 'center',
      },
      {
        title: '总分',
        dataIndex: 'maxScore',
        key: 'maxScore',
        align: 'center',
      },
      {
        title: '分数',
        dataIndex: 'examScore',
        key: 'examScore',
        align: 'center',
      },
      {
        title: '班级名次',
        key: 'classRank',
        align: 'center',
        render: item => {
          return (
            <span>
              {item.classRank} / {item.classStuCount}
            </span>
          );
        },
      },
      {
        title: '年级名次',
        key: 'gradeRank',
        align: 'center',
        render: item => {
          return (
            <span>
              {item.gradeRank} / {item.gradeStuCount}
            </span>
          );
        },
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: item => {
          return (
            <a
              href="javascript:;"
              onClick={() => {
                this.setState({
                  currentScore: item,
                  delVisible: true,
                });
              }}
            >
              删除
            </a>
          );
        },
      },
    ];
  };
  LevelColumns = () => {
    return [
      {
        title: '数学',
        key: 'math',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 1);
        },
      },
      {
        title: '语文',
        key: 'chinese',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 2);
        },
      },
      {
        title: '英语',
        key: 'english',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 3);
        },
      },
      {
        title: '物理',
        key: 'wl',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 4);
        },
      },
      {
        title: '化学',
        key: 'hx',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 5);
        },
      },
      {
        title: '生物',
        key: 'sw',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 6);
        },
      },
      {
        title: '地理',
        key: 'dl',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 7);
        },
      },
      {
        title: '历史',
        key: 'ls',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 8);
        },
      },
      {
        title: '政治',
        key: 'zz',
        align: 'center',
        render: item => {
          return this.getLevelCePing(item, 9);
        },
      },
    ];
  };
  getActionCePing = (value, type) => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    const { subjectPc } = this.state;
    if (subjectPc.length === 0) {
      return '';
    }
    const math = subjectPc.find(i => i.type === type);
    if (math.status === 1) {
      return (
        <Link to={`/studentManage/pc?studentId=${params.studentId}&type=${type}`}>去评测</Link>
      );
    } else if (math.status === 2) {
      return <Link to={`/studentManage/pc?studentId=${params.studentId}&type=${type}`}>查看</Link>;
    } else {
      return <span>未签约</span>;
    }
  };
  cepingColumns = () => {
    return [
      {
        title: '数学',
        key: 'math',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 1);
        },
      },
      {
        title: '语文',
        key: 'chinese',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 2);
        },
      },
      {
        title: '英语',
        key: 'english',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 3);
        },
      },
      {
        title: '物理',
        key: 'wl',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 4);
        },
      },
      {
        title: '化学',
        key: 'hx',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 5);
        },
      },
      {
        title: '生物',
        key: 'sw',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 6);
        },
      },
      {
        title: '地理',
        key: 'dl',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 7);
        },
      },
      {
        title: '历史',
        key: 'ls',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 8);
        },
      },
      {
        title: '政治',
        key: 'zz',
        align: 'center',
        render: item => {
          return this.getActionCePing(item, 9);
        },
      },
    ];
  };
  getLevelCePing = (item, type) => {
    const { location: { search } } = this.props;
    const params = getParamUrl(search);
    const { levelPc } = this.state;
    if (levelPc.length === 0) {
      return '';
    }
    const math = levelPc.find(i => i.type === type);
    if (math.status === 1) {
      return (
        <a
          href="javascript:;"
          onClick={() => {
            this.setState({ levelVisible: true, currentLevelObj: math });
          }}
        >
          请定档
        </a>
      );
    } else if (math.status === 2) {
      return <Tag color="cyan">{math.msg}</Tag>;
    } else {
      return <span>未签约</span>;
    }
  };
  cepingData = () => {
    const arr = [];
    arr.push({ id: 1, key: '1' });
    return arr;
  };

  getUserSubjects = userInfo => {
    if (userInfo.likeSubject) {
      const subjectArr = userInfo.likeSubject.map(s => s.subject);
      return subjectArr.join('、');
    } else {
      return '';
    }
  };
  handleClassChange = str => {
    const e = JSON.parse(str);
    console.log(e);
    if (e.lessons) {
      e.lessons.map((v, i) => {
        v.key = i + 1;
      });
    }
    this.setState({
      classCommonInfo: {
        allow: e.campusName + '-' + e.classLevelName + '-' + e.subjectName,
        teacher: e.teacherName,
        time: e.studentClassTime,
        status: e.studyStatus,
      },
      classLessons: e.lessons ? e.lessons : [],
    });
  };
  handleDelOk = () => {
    const { currentScore } = this.state;

    this.props
      .dispatch({
        type: 'studentDetailConfig/delScore',
        payload: {
          id: currentScore.id,
        },
      })
      .then(() => {
        const data = this.state.recentScores.filter(r => r.id !== currentScore.id);
        this.setState({
          recentScores: data,
        });
      });

    this.setState({
      delVisible: false,
    });
  };
  handleDelCancel = () => {
    this.setState({
      delVisible: false,
    });
  };
  hasErrors = fieldsError => {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  };
  handleSubmit = e => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { recentScores } = this.state;
        const obj = {
          studentId: Number(params.studentId),
          key: recentScores.length + 1,
          subject: values.subject,
          examName: values.examName + '',
          maxScore: values.maxScore + '',
          examScore: values.examScore + '',
          classRank: values.classRank,
          gradeRank: values.gradeRank,
          classStuCount: values.classStuCount,
          gradeStuCount: values.gradeStuCount,
        };
        dispatch({
          type: 'studentDetailConfig/addNewScore',
          payload: obj,
        }).then(() => {
          const { newScore } = this.props.studentDetailConfig;
          obj.id = newScore.id;
          recentScores.push(obj);
          this.setState({
            uniQueKey: getUniqueKey(10),
            modalVisible: false,
            recentScores,
          });
        });
      }
    });
  };
  openModal = () => {
    this.setState({
      uniQueKey: getUniqueKey(10),
      modalVisible: true,
    });
  };
  handleCancel = () => this.setState({ previewVisible: false });
  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
  handleChange = ({ fileList, file }, record) => {
    if (file.type === 'image/png' || file.type === 'image/jpeg') {
      const newOne = fileList[fileList.length - 1];
      if (newOne.status === 'done') {
        const { response } = newOne;
        newOne.name = response.data;
        newOne.scoreId = record.id;
      }
      const { recentScores } = this.state;
      record.imageArray = fileList;
      this.setState({ recentScores: [...recentScores] });
    }
  };
  imageRemove = e => {
    const { recentScores } = this.state;
    this.props
      .dispatch({
        type: 'studentDetailConfig/deleteImg',
        payload: {
          scoreId: e.scoreId,
          image: e.name,
        },
      })
      .then(() => {
        const score = recentScores.find(r => r.id === e.scoreId);
        if (score) {
          const { imageArray } = score;
          const newArr = imageArray.filter(i => i.name !== e.name);
          score.imageArray = newArr;
          this.setState({ recentScores: [...recentScores] });
        }
      });
  };
  showHideContent = record => {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传试卷</div>
      </div>
    );
    const actionUrl = baseUri + 'teach/manage/student/upload';
    return (
      <div className="clearfix">
        <Upload
          name="file"
          action={actionUrl}
          listType="picture-card"
          fileList={record.imageArray}
          onPreview={this.handlePreview}
          beforeUpload={this.beforeUpload}
          onChange={e => this.handleChange(e, record)}
          withCredentials={true}
          data={{ id: record.id }}
          onRemove={this.imageRemove}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  };
  levelOk = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    if (this.state.levelSelected === '') {
      myMessage.error('请选择定档级别', 2);
      return '';
    }
    dispatch({
      type: 'studentDetailConfig/saveLevelInfo',
      payload: {
        studentId: params.studentId,
        type: this.state.currentLevelObj.type,
        value: this.state.levelSelected,
      },
    }).then(() => {
      dispatch({
        type: 'studentDetailConfig/getStudentLevelInfo',
        payload: {
          studentId: params.studentId,
        },
      }).then(() => {
        const { levelPc } = this.props.studentDetailConfig;
        this.setState({
          levelPc: levelPc.data,
          isPingCe: levelPc.isPingCe,
          levelVisible: false,
          levelSelected: '',
        });
      });
    });
  };
  levelCancel = () => {
    this.setState({ levelVisible: false, levelSelected: '' });
  };
  levelRadioChange = e => {
    this.setState({ levelSelected: e.target.value });
  };
  backPage = () => {
    const backUrl = sessionStorage.getItem('backRef');
    if (backUrl) {
      sessionStorage.removeItem('backRef');
      this.props.dispatch(routerRedux.push(`/lesson/studentManage/home`));
      return;
    }
    const lessonId = sessionStorage.getItem('lessonId');
    const lessonType = sessionStorage.getItem('lessonType');
    if (lessonType === '0') {
      // 非数学课
      this.props.dispatch(routerRedux.push(`/lesson/lessonInfo/other?lessonId=${lessonId}`));
    } else {
      // 数学课
      this.props.dispatch(routerRedux.push(`/lesson/3/lesson-info?lessonId=${lessonId}`));
    }
  };
  toChangeDetailPage = () => {
    this.props.dispatch(
      routerRedux.push(`/studentManage/student/detail/config?studentId=${this.state.studentId}`)
    );
  };
  beforeUpload = file => {
    const isJPG = file.type === 'image/png' || file.type === 'image/jpeg';
    if (!isJPG) {
      myMessage.error('图片格式不正确！默认支持png、jpg', 2);
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      myMessage.error('图片大小不能超过2M！');
    }
    if (!isJPG || !isLt2M) {
      this.setState({
        allowUpload: false,
      });
    }
    return isJPG && isLt2M;
  };

  render = () => {
    const headDivBorder = {
      borderTop: '1px solid #d9d9d9',
      borderLeft: '1px solid #d9d9d9',
      backgroundColor: '#f2f2f2',
      height: '30px',
      padding: '2px 0',
      textAlign: 'center',
    };
    const valueDivBorder = {
      borderTop: '1px solid #d9d9d9',
      height: '30px',
      padding: '2px 0',
      textAlign: 'center',
    };

    const { getFieldDecorator, getFieldsError } = this.props.form;

    const { userInfo } = this.state;

    const { classes } = this.props.studentDetailConfig;

    const { location: { search } } = this.props;

    const params = getParamUrl(search);

    return (
      <PageHeaderLayout>
        <Card
          bordered={false}
          style={{ minHeight: minHeight }}
          title="个人信息"
          extra={
            <Button type="primary" size="small" onClick={this.backPage}>
              返回
            </Button>
          }
        >
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={12}>
                <div style={{ marginBottom: '15px' }}>
                  <span style={{ fontSize: '20px' }}>
                    <strong>
                      {userInfo.name} ({userInfo.sex}
                      <span hidden={!userInfo.age}>/</span>
                      {userInfo.age})
                    </strong>
                  </span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <Tag color="#f50" hidden={userInfo.learnStatus !== 1}>
                    进步
                  </Tag>
                  <Tag color="#2db7f5" hidden={userInfo.learnStatus !== 2}>
                    问题
                  </Tag>
                  <Tag color="#87d068" hidden={userInfo.learnStatus !== 3}>
                    稳定
                  </Tag>
                </div>
                <div>
                  {userInfo.schoolName}
                  <span hidden={!userInfo.grade}>&</span>
                  {userInfo.grade}
                  <span hidden={!userInfo.likeSubject}>&</span>
                  {this.getUserSubjects(userInfo)}
                </div>
              </Col>
              <Col span={12}>
                <div style={{ marginBottom: '15px' }}>
                  <span style={{ fontSize: '20px' }}>
                    <strong>目标学校</strong>
                  </span>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div>{userInfo.hopeSchool}</div>
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={22} style={{ fontSize: '20px' }}>
                <strong>学生信息</strong>
              </Col>
              <Col span={2} style={{ textAlign: 'right' }}>
                <Button type="primary" size="small" onClick={() => this.toChangeDetailPage()}>
                  去修改
                </Button>
              </Col>
            </Row>
            <Row>
              <Col span={6} style={headDivBorder}>
                姓名
              </Col>
              <Col span={6} style={valueDivBorder}>
                {userInfo.name}
              </Col>
              <Col span={6} style={headDivBorder}>
                家长电话
              </Col>
              <Col span={6} style={{ ...valueDivBorder, borderRight: '1px solid #d9d9d9' }}>
                {userInfo.parentPhone}
              </Col>

              <Col span={6} style={headDivBorder}>
                年龄
              </Col>
              <Col span={6} style={valueDivBorder}>
                {userInfo.age}
              </Col>
              <Col span={6} style={headDivBorder}>
                联系电话
              </Col>
              <Col span={6} style={{ ...valueDivBorder, borderRight: '1px solid #d9d9d9' }}>
                {userInfo.phone}
              </Col>

              <Col span={6} style={headDivBorder}>
                性别
              </Col>
              <Col span={6} style={valueDivBorder}>
                {userInfo.sex}
              </Col>
              <Col span={6} style={headDivBorder}>
                微信/QQ
              </Col>
              <Col span={6} style={{ ...valueDivBorder, borderRight: '1px solid #d9d9d9' }}>
                {userInfo.wchat} <span hidden={!(userInfo.qq && userInfo.wchat)}>/</span>{' '}
                {userInfo.qq}
              </Col>

              <Col span={6} style={{ ...headDivBorder, borderBottom: '1px solid #d9d9d9' }}>
                所在地区
              </Col>
              <Col span={6} style={{ ...valueDivBorder, borderBottom: '1px solid #d9d9d9' }}>
                {userInfo.areaName}
              </Col>
              <Col span={6} style={{ ...headDivBorder, borderBottom: '1px solid #d9d9d9' }}>
                所在学校
              </Col>
              <Col
                span={6}
                style={{
                  ...valueDivBorder,
                  borderBottom: '1px solid #d9d9d9',
                  borderRight: '1px solid #d9d9d9',
                }}
              >
                {userInfo.schoolName}
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={24} style={{ fontSize: '20px' }}>
                <strong>上课信息</strong>
              </Col>
            </Row>
            <Row>
              <Col span={4} style={{ fontSize: '20px' }}>
                <Select
                  style={{ width: '80%' }}
                  placeholder="请选择班级名称"
                  onChange={this.handleClassChange}
                >
                  {classes.map((c, i) => (
                    <Select.Option value={JSON.stringify(c)} key={i}>
                      {c.name}
                    </Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={5} style={{ fontSize: '16px', padding: '5px 0' }}>
                <strong>{this.state.classCommonInfo.allow}</strong>
              </Col>
              <Col span={5} style={{ fontSize: '16px', padding: '5px 0' }}>
                <strong>任课老师：{this.state.classCommonInfo.teacher}</strong>
              </Col>
              <Col span={5} style={{ fontSize: '16px', padding: '5px 0' }}>
                <strong>分班时间：{this.state.classCommonInfo.time}</strong>
              </Col>
              <Col span={5} style={{ fontSize: '16px', padding: '5px 0' }}>
                <strong>就读状态：{this.state.classCommonInfo.status}</strong>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.state.classLessons}
                  loading={this.props.lessonInfoLoadingoading}
                  columns={this.lessonInfoColumns()}
                  size="small"
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={24} style={{ fontSize: '20px' }}>
                <strong>数学错题集合</strong>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.state.errorQuestions}
                  columns={this.errorColumns()}
                  size="small"
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={24} style={{ fontSize: '20px' }}>
                <strong>请假日志</strong>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.state.leaves}
                  columns={this.leaveColumns()}
                  size="small"
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={22} style={{ fontSize: '20px' }}>
                <strong>近期学校成绩</strong>
              </Col>
              <Col span={2} style={{ textAlign: 'right' }}>
                <Button type="primary" size="small" onClick={this.openModal}>
                  录入新成绩
                </Button>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.state.recentScores}
                  columns={this.realityColumns()}
                  size="small"
                  expandedRowRender={record => this.showHideContent(record)}
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={20} style={{ fontSize: '20px' }}>
                <strong>水平定档</strong>
              </Col>
              <Col
                span={4}
                style={{ fontSize: '20px' }}
                style={{ textAlign: 'right' }}
                hidden={this.state.isPingCe}
              >
                请咨询师在pad上进行测评
              </Col>
              <Col
                span={4}
                style={{ fontSize: '20px' }}
                style={{ textAlign: 'right' }}
                hidden={!this.state.isPingCe}
              >
                <Button type="primary" size="small">
                  <Link to={`/studentManage/student/view?studentId=${params.studentId}`}>
                    查看更多
                  </Link>
                </Button>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.cepingData()}
                  columns={this.LevelColumns()}
                  size="small"
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <Row>
              <Col span={24} style={{ fontSize: '20px' }}>
                <strong>学科评测</strong>
              </Col>
            </Row>
            <Row>
              <Col span={24} style={{ fontSize: '16px', padding: '5px 0' }}>
                <Table
                  dataSource={this.cepingData()}
                  columns={this.cepingColumns()}
                  size="small"
                  pagination={{ pageSize: 5, hideOnSinglePage: true }}
                  bordered
                />
              </Col>
            </Row>
          </div>
        </Card>

        <Modal
          key={this.state.uniQueKey}
          title="录入新成绩"
          width="30%"
          visible={this.state.modalVisible}
          footer={null}
          onCancel={() => {
            this.setState({ modalVisible: false, uniQueKey: getUniqueKey(10) });
          }}
        >
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="学科" labelCol={{ span: '5' }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('subject', {
                rules: [
                  {
                    required: true,
                    message: '请选择学科',
                  },
                ],
              })(
                <Select style={{ width: 120 }} placeholder="请选择学科">
                  <Option value="数学">数学</Option>
                  <Option value="语文">语文</Option>
                  <Option value="英语">英语</Option>
                  <Option value="物理">物理</Option>
                  <Option value="化学">化学</Option>
                  <Option value="生物">生物</Option>
                  <Option value="地理">地理</Option>
                  <Option value="历史">历史</Option>
                  <Option value="政治">政治</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="考试名称" labelCol={{ span: '5' }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('examName', {
                rules: [
                  {
                    required: true,
                    message: '请输入考试名称',
                  },
                ],
              })(<Input maxLength={50} />)}
            </FormItem>
            <FormItem label="总分" labelCol={{ span: '5' }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('maxScore', {
                rules: [
                  {
                    required: true,
                    message: '请输入总分',
                  },
                ],
              })(<InputNumber min={1} max={500} style={{ width: '100%' }} />)}
            </FormItem>
            <FormItem label="分数" labelCol={{ span: '5' }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('examScore', {
                rules: [
                  {
                    required: true,
                    message: '请输入分数',
                  },
                ],
              })(<InputNumber min={1} max={500} style={{ width: '100%' }} />)}
            </FormItem>
            <Row>
              <Col span={12}>
                <FormItem label="班级名次" labelCol={{ span: '10' }} wrapperCol={{ span: 13 }}>
                  {getFieldDecorator('classRank', {
                    rules: [
                      {
                        required: true,
                        message: '请输入班级名次',
                      },
                    ],
                  })(<InputNumber min={1} max={1000} style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="班级总人数" labelCol={{ span: '9' }} wrapperCol={{ span: 7 }}>
                  {getFieldDecorator('classStuCount', {
                    rules: [
                      {
                        required: true,
                        message: '请输入班级总人数',
                      },
                    ],
                  })(<InputNumber min={1} max={1000} style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="年级名次" labelCol={{ span: '10' }} wrapperCol={{ span: 13 }}>
                  {getFieldDecorator('gradeRank', {
                    rules: [
                      {
                        required: true,
                        message: '请输入年级名次',
                      },
                    ],
                  })(<InputNumber min={1} max={1000} style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="年级总人数" labelCol={{ span: '9' }} wrapperCol={{ span: 7 }}>
                  {getFieldDecorator('gradeStuCount', {
                    rules: [
                      {
                        required: true,
                        message: '请输入年级总人数',
                      },
                    ],
                  })(<InputNumber min={1} max={10000} style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <FormItem label="姓名" labelCol={{ span: '5' }} wrapperCol={{ span: 15 }}>
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Input maxLength={50} />)}
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                htmlType="submit"
                disabled={this.hasErrors(getFieldsError())}
                style={{ width: '150px' }}
                loading={this.props.addNewScoreLoading}
              >
                录入
              </Button>
            </FormItem>
          </Form>
        </Modal>
        <Modal
          title="确认删除吗？"
          width="20%"
          visible={this.state.delVisible}
          onOk={this.handleDelOk}
          onCancel={this.handleDelCancel}
        >
          删除后数据不可恢复!
        </Modal>
        <Modal
          title="请定档"
          width="30%"
          visible={this.state.levelVisible}
          onOk={this.levelOk}
          onCancel={this.levelCancel}
        >
          <RadioGroup onChange={this.levelRadioChange} value={this.state.levelSelected}>
            <Radio value="第一档">第一档</Radio>
            <Radio value="第二档">第二档</Radio>
            <Radio value="第三档">第三档</Radio>
            <Radio value="第四档">第四档</Radio>
            <Radio value="第五档">第五档</Radio>
            <Radio value="第六档">第六档</Radio>
          </RadioGroup>
        </Modal>
      </PageHeaderLayout>
    );
  };
}
export default Form.create()(StudentDetail);
